<template>
	<!-- 自定义导航栏 -->
	<view class="page-navbar">
		<block v-if="$slots.left || $slots.default || $slots.right">
			<uni-nav-bar
				:style="{
					paddingTop: barHeight + 'rpx',
					height: contentHeight + 'rpx',
					background: dark ? 'rgb(51, 51, 51)' : backgroundColor || '#fff',
				}"
				:class="[fixed ? 'w-full fixed z-[1024]' : 'w-full']"
				:title="title"
				:leftText="leftText"
				:rightText="rightText"
				:leftIcon="isLeftIcon ? leftIcon : ''"
				:rightIcon="rightIcon"
				:color="textColor"
				:backgroundColor="backgroundColor"
				:fixed="fixed"
				:statusBar="statusBar"
				:shadow="shadow"
				:border="border"
				:height="contentHeight + 'rpx'"
				:dark="dark"
				:leftWidth="title ? leftWidth : `calc(100% - ${width}rpx)`"
				:rightWidth="title ? rightWidth : '0rpx'"
				@clickLeft="
					() => {
						$slots.left ? null : goBack();
					}
				"
			>
				<template v-slot:left v-if="$slots.left">
					<slot name="left"></slot>
				</template>
				<template v-slot:default v-if="$slots.default">
					<slot name="default"></slot>
				</template>
				<template v-slot:right v-if="$slots.right">
					<slot name="right"></slot>
				</template>
			</uni-nav-bar>
		</block>
		<block v-else>
			<uni-nav-bar
				:style="{
					paddingTop: barHeight + 'rpx',
					height: contentHeight + 'rpx',
					background: dark ? 'rgb(51, 51, 51)' : backgroundColor || '#fff',
				}"
				:class="[fixed ? 'w-full fixed z-[1024]' : 'w-full']"
				:title="title"
				:leftText="leftText"
				:rightText="rightText"
				:leftIcon="isLeftIcon ? leftIcon : ''"
				:rightIcon="rightIcon"
				:color="textColor"
				:backgroundColor="backgroundColor"
				:fixed="fixed"
				:statusBar="statusBar"
				:shadow="shadow"
				:border="border"
				:height="contentHeight + 'rpx'"
				:dark="dark"
				:leftWidth="title ? leftWidth : `calc(100% - ${width}rpx)`"
				:rightWidth="title ? rightWidth : '0rpx'"
				@clickLeft="
					() => {
						$slots.left ? null : goBack();
					}
				"
			>
			</uni-nav-bar>
		</block>
		<view v-if="fixed" :style="{ paddingTop: barAlbright + 'rpx' }"></view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { systemInfo } from '@/utils/getSystemInfo';

const props = withDefaults(
	defineProps<{
		title?: string;
		leftText?: string;
		rightText?: string;
		leftIcon?: any;
		rightIcon?: any;
		textColor?: string;
		backgroundColor?: string;
		fixed?: boolean;
		statusBar?: boolean;
		shadow?: boolean;
		border?: boolean;
		dark?: boolean;
		leftWidth?: number | string;
		rightWidth?: number | string;
		stat?: boolean | string;
		height?: number;
	}>(),
	{
		leftIcon: 'left',
		textColor: '#303030',
		backgroundColor: '#FFFFFF',
		fixed: false,
		statusBar: false,
		shadow: false,
		border: false,
		dark: false,
		leftWidth: '120rpx',
		rightWidth: '120rpx',
		stat: '120rpx',
		height: 0,
	},
);
const { statusBarHeight, navHeight, menuButtonWidth } = systemInfo();
const barHeight = ref(0);
const contentHeight = ref(props.height);
const width = ref(0);
const isLeftIcon = ref(false);
const barAlbright = ref(0);
// 获取页面栈
const pages = getCurrentPages();
// 获取路由参数
const curPage = pages[pages.length - 1];

const tabBarPath = [
	'pages/index/index',
	'pages/class/index',
	'pages/ranking/index',
	'pages/my/index',
];

onLoad(() => {
	barHeight.value = statusBarHeight; // 手机状态栏高度
	contentHeight.value = props.height || navHeight;
	width.value = menuButtonWidth;
	barAlbright.value = navHeight + statusBarHeight;
	if (!tabBarPath.includes(curPage.route)) {
		isLeftIcon.value = true;
	}
});

const goBack = () => {
	if (tabBarPath.includes(curPage.route)) {
		return;
	}
	if (pages.length <= 1) {
		uni.redirectTo({
			url: '/pages/index/index',
		});
	} else {
		const prevpage = pages[pages.length - 2];
		let delta = 1;
		if (prevpage.route === curPage.route) {
			delta = 2;
		}
		uni.navigateBack({		
			delta,
		});
	}
};
</script>
<script lang="ts">
export default {
	options: { styleIsolation: 'shared' },
};
</script>

<style lang="scss" scoped>
.page-navbar {
	width: 100%;

	:deep(.uni-navbar-btn-text) {
		width: 100%;
		line-height: normal !important;

		text {
			display: inline-block;
			width: calc(100% - 20px);
			overflow: hidden;
			font-size: 33rpx !important;
			font-weight: bold;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	:deep(.uni-navbar-btn-icon-left) {
		text {
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
</style>
